<template>
  <div
    class="item"
    @mouseenter="chooseItem(true)"
    @mouseleave="chooseItem(false)"
    :style="{color:color,backgroundColor:bgC}"
  >
    <div>
      <el-checkbox v-model="todo.isCheck"></el-checkbox>
      {{todo.title}}
    </div>
    <div>
      <el-button v-if="showBtn" type="danger" size="mini" @click="deleteItem">删除</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { Todo } from "@/types/todo.ts";
@Options({
  props: {
    todo: {
      type: Object as () => Todo,
      required: true
    },
    index: {
      type: Number
    },
    deleteI: {
      type: Function,
      required: true
    }
  }
})
export default class Test extends Vue {
  todo!: Todo;
  index!: number;
  deleteI!: Function;
  color: string = "#606266";
  bgC: string = "#fff";
  showBtn: boolean = false;
  public chooseItem(flag: boolean): void {
    if (flag) {
      this.color = "#fff";
      this.bgC = "pink";
    } else {
      this.color = "#606266";
      this.bgC = "#fff";
    }
    this.showBtn = flag;
  }
  public deleteItem():void{
      this.deleteI(this.index)
  }
}
</script>

<style lang="less" scoped>
.item{
  margin:10px 0;
  display:flex;
  justify-content: space-between;
  box-sizing:border-box;
  padding:5px 15px;
  cursor: pointer;
  .el-checkbox{
    margin-right:5px;
    height:28px;
    line-height:28px;
  }
}
</style>
